<template>
	<view v-show="visible" class="my">
		<view class="layout-padding-12 my-head">
			<view class="person-info">
				<u--image :width="60" :height="60" :src="userInfo.avatar_url" shape="circle"></u--image>
				<view class="person-info-item text-white">
					<view class="name">{{userInfo.nickname}}</view>
					<view class="text-sm">{{userInfo.dept_names}}</view>
					<view class="id">
						ID:{{userInfo.member_id}}
					</view>
					<view v-if="!userInfo.phone_discount" class="Grid Grid--center Grid--justifyCenter"
						style="background: #FFFFFF; color: #EB2E29; padding: 2px 10px; border-radius: 10px; font-size: 12px; max-width: 120px;"
						@click="() => {
						$refs.bindingPopup.open()
					}">
						<u-icon color="#EB2E29" name="phone-fill"></u-icon>
						<view>绑定手机号</view>
					</view>
					<view v-if="userInfo.phone_discount" class="Grid Grid--center Grid--justifyCenter"
						style="background: #FFFFFF; color: #ffffff; padding: 2px 10px; border-radius: 10px; font-size: 12px; max-width: 120px;">
						<u-icon color="#EB2E29" name="phone-fill"></u-icon>
						<view style="color: #EB2E29;">{{userInfo.phone}}</view>
					</view>
				</view>
			</view>
			<view class="my-income">
				<view class="balance">
					<view class="Grid Grid--bottom balance_item">
						<view class="text-sm" style="color: #9D7E5D;">钱包</view>
						<u--text @click="getSkip('/pages/user/balanceDetails/balanceDetails')" size="18" color="#C66F16"
							mode="price" :text="userInfo.balance" bold></u--text>
					</view>
					<u-button class="bj-color" :hairline="false" @click="getSkip('/pages/user/payBalance/payBalance')" style="border: none;">充值</u-button>
				</view>
			</view>

			<u-cell-group v-if="visible" :border="false" :customStyle="{'background-color': '#ffffff', 'border-radius': '10px'}">
				<u-cell title="我的关注" isLink :titleStyle="{'font-size': '16px', color: '#222222', padding: '5px 0'}"
					:border="false" @click="getSkip('/pages/user/follow/follow')">
					<view slot="icon">
						<image src="https://code-app.oss-cn-beijing.aliyuncs.com/other/26.png" mode="widthFix"
							style="width: 24px; height: 24px; vertical-align: middle;" />
					</view>
				</u-cell>
				<u-cell title="优惠券" isLink :titleStyle="{'font-size': '16px', color: '#222222', padding: '5px 0'}"
					:border="false" @click="getSkip('/pages/user/coupon/coupon')">
					<view slot="icon">
						<image src="https://code-app.oss-cn-beijing.aliyuncs.com/other/25.png" mode="widthFix"
							style="width: 24px; height: 24px; vertical-align: middle;" />
					</view>
				</u-cell>
				<u-cell title="充值记录" isLink :titleStyle="{'font-size': '16px', color: '#222222', padding: '5px 0'}"
					:border="false" @click="getSkip('/pages/user/rechargeRecord/rechargeRecord')">
					<view slot="icon">
						<image src="https://code-app.oss-cn-beijing.aliyuncs.com/other/24.png" mode="widthFix"
							style="width: 24px; height: 24px; vertical-align: middle;" />
					</view>
				</u-cell>
				<u-cell title="账单记录" isLink :titleStyle="{'font-size': '16px', color: '#222222', padding: '5px 0'}"
					:border="false" @click="getSkip('/pages/user/record/record')">
					<view slot="icon">
						<image src="https://code-app.oss-cn-beijing.aliyuncs.com/other/23.png" mode="widthFix"
							style="width: 24px; height: 24px; vertical-align: middle;" />
					</view>
				</u-cell>
				<!-- <u-cell title="设置" isLink :titleStyle="{'font-size': '16px', color: '#222222', padding: '5px 0'}" :border="false">
					<view slot="icon">
						<image src="https://code-app.oss-cn-beijing.aliyuncs.com/other/22.png" mode="widthFix" style="width: 24px; height: 24px; vertical-align: middle;" />
					</view>
				</u-cell> -->
				<u-cell title="意见反馈" isLink :titleStyle="{'font-size': '16px', color: '#222222', padding: '5px 0'}"
					:border="false" @click="getSkip('/pages/user/feedback/feedback')">
					<view slot="icon">
						<image src="https://code-app.oss-cn-beijing.aliyuncs.com/other/21.png" mode="widthFix"
							style="width: 24px; height: 24px; vertical-align: middle;" />
					</view>
				</u-cell>
				<u-cell title="清除缓存" isLink :titleStyle="{'font-size': '16px', color: '#222222', padding: '5px 0'}"
					:border="false" @click="reset">
					<view slot="icon">
						<image src="https://code-app.oss-cn-beijing.aliyuncs.com/other/27.png" mode="widthFix"
							style="width: 24px; height: 24px; vertical-align: middle;" />
					</view>
				</u-cell>
			</u-cell-group>
		</view>

		<u-divider style="width: 100%;" text="All rights reserved. v1.2.2"></u-divider>

		<!-- 绑定手机 -->
		<binding-popup ref="bindingPopup" :data="{}" type="right" @confirm="confirmBinding"></binding-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	import {
		removeParam,
		parseQuery
	} from '@/utils/index.js'
	import bindingPopup from '@/components/binding-popup/binding-popup.vue'
	import {
		addContent
	} from '@/service/index.js'

	export default {
		name: 'my',
		components: {
			bindingPopup
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			},
		},
		watch: {
			visible() {
				this.visible && this.initData()
			}
		},
		data() {
			return {}
		},
		computed: {
			...mapState({
				userInfo: state => state.login.userInfo,
				redirect_uri: state => state.login.redirect_uri
			}),
		},
		mounted() {
			this.initData()
		},
		methods: {
			async initData() {
				try {
					if (Object.keys(this.userInfo).length) await this.$store.dispatch('login/userinfoAction');
				} catch (error) {}
			},
			// 跳转页面
			getSkip(url) {
				uni.navigateTo({
					url: `${url}?appid=${this.userInfo.appid}`
				})
			},
			reset() {
				uni.showModal({
					content: '是否清除本地缓存?',
					success: async (res) => {
						if (res.confirm) {
							const {
								appid
							} = parseQuery()
							try {
								let http = ``
								if (this.redirect_uri) {
									// 防封
									http = `${this.redirect_uri}/user/#/?appid=${appid}`
								} else {
									// 常规
									http = `${window.location.href}`
									http = removeParam("state", http)
									http = removeParam("code", http)
								}
								await this.$store.dispatch('login/loginOut');
								uni.showToast({
									title: '缓存清除成功!',
									icon: 'none'
								})
								// 境内境外均需境内授权
								window.location.href =
									`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(http.replace("#", "virtually"))}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
							} catch (error) {}
						} else if (res.cancel) {}
					}
				});
			},
			confirmBinding() {
				// window.location.reload()
				this.$refs.bindingPopup.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my {
		height: 100%;
		background: #FEF3F3;

		.my-head {
			position: relative;
			background: url('@/static/images/my/bj_user.png') top center no-repeat;
			background-size: 100% 302px;
			padding: 35px 20px 0;

			.person-info {
				display: flex;
				align-items: center;
				flex: 1;
				margin-bottom: 20px;
				padding: 0 15px;

				.person-info-item {
					margin-left: 8px;

					.name {
						font-weight: 600;
						font-size: 18px;
					}

					.id {
						font-weight: 400;
						font-size: 12px;
						line-height: 20px;
					}
				}
			}
		}

		.my-income {
			display: flex;
			// background: #FEEFDD;
			justify-content: space-around;
			text-align: center;
			padding: 0 15px;

			.my-income-item {
				.num {
					font-weight: 600;
					font-size: 16px;
					color: #754D18;
					line-height: 24px;
				}

				.name {
					font-weight: 400;
					font-size: 12px;
					color: #AC8F68;
					line-height: 20px;
				}
			}

			.balance {
				display: flex;
				width: 100%;
				padding: 20px 16px;
				justify-content: space-between;
				align-items: center;
				background: linear-gradient(130deg, #FFF1CA 0%, #FEC074 100%);
				border-radius: 10px 10px 0px 0px;

				.bj-color {
					width: 68px;
					height: 32px;
					background: #EB2E29;
					font-size: 14px;
					color: #FFF0ED;
					line-height: 32px;
					text-align: center;
					border-radius: 800px;
				}

				.balance_item {
					flex: 1;
					text-align: left;
				}
			}
		}
	}
</style>